<template>
    <div id="app">
        <div class="wel">
            <p>welcome</p>
            <p>Administrator</p>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Welcome"
    }
</script>

<style lang="less"scoped>
    #app{
        width: 100%;
        height: 100%;
        .wel{
            position: absolute;
            top: 300px;
            left: 800px;
            transform: translate(-50%,-60%);
            -webkit-text-fill-color: transparent;
            background-image:  -webkit-linear-gradient(left,#129835,#ece648 25%,#129835 50%,#F9E92B 75%,rgb(40, 150, 38));
            background-size: 200%,100%;
            -webkit-background-clip: text;
            -webkit-animation: word 3s linear infinite ;
            p{
                display: inline-block;
                font-size: 60px;
                letter-spacing: 2px;
                &:first-child{
                    margin-right: 20px;
                }
            }
        }
    }
    @keyframes word {
        0%{background-position: 0 0}
        100%{background-position: -100% 0}
    }
</style>
